<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 17:20:14
 * @FilePath     : \vue3.2.31-case\响应式基础\响应式工具函数\toRefs\基本使用\App.vue
-->
<script setup lang="ts">
import { reactive, toRefs } from "vue"

//普通引用数据转换
const obj = {
  name:'test',
  age:16, 
  childrens:{
    name: 'haha',
    age: 18,
    childrens: {
      name: 'ts'
    }
  }
}
const state = toRefs(obj)

// name: ObjectRefImpl,
// age: ObjectRefImpl,
// childrens: ObjectRefImpl {
//   value: {
//     age: 18,
//     name: "haha"
//     childrens: {name: 'ts'}
//   }
// }
console.log(state)

state.name.value = 'zs' //obj的name的属性值也会改变，
state.age.value = 18  //obj的age的属性值也会改变
console.log(obj)  //{name: 'zs', age: 18, childrens: {…}}

console.log('======')

//reactive响应式数据转换
// const state2 = toRefs(reactive(obj))

// name: ObjectRefImpl,
// age: ObjectRefImpl,
// childrens: ObjectRefImpl {
//   value: Proxy{
//     [[Target]]: Object {
//        age: 18,
//        childrens: {name: 'ts'},
//        name: 'haha'
//      }
//   }
// }
// console.log(state2)

// state2.name.value = 'ls'
// state2.age.value = 20
// console.log(obj)    //{name: 'ls', age: 20, childrens: {…}}

</script>

<template>
  <h3>toRefs</h3>
  <h5>
    作用：浅层批量转换。将传入的对象中每一项转为ref对象
  </h5>
  <h5>
    参数：<br>
    引用数据或reactive类型的数据
  </h5>
  <h5>
    使用场景：<br>
    1、解构props，将props中每一项转换为ref对象,保持响应性<br>
    2、解构reactive响应式对象，避免失去响应性，...toRefs('reactive响应式对象') <br>
    3、组合式函数中返回toRefs包裹的对象或reactive对象，使用时可在不失去响应性的情况下破坏结构 <br>
  </h5>
  <h5>
    toRefs和toRef的区别：<br>
    1、toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值
  </h5>
  <h5>
    注意：<br>
    1、使用 toRefs 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据
  </h5>
  <ul>
    <li>{{state.name}}</li>
    <li>{{state.age}}</li>
  </ul>
  <!-- <ul>
    <li>{{state2.name}}</li>
    <li>{{state2.age}}</li>
  </ul> -->
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
